<template>
    <div>
        <el-form inline>
            <el-form-item label="名称">
                <el-input placeholder="请输入名称" clearable v-model="searchParams.searchValue" />
            </el-form-item>
            <el-form-item label="类型" style="width: 200px">
                <el-select placeholder="请输入类型" clearable v-model="searchParams.type">
                    <el-option label="生鲜" value="生鲜" />
                    <el-option label="水果" value="水果" />
                    <el-option label="冷饮" value="冷饮" />
                    <el-option label="甜品" value="甜品" />
                    <el-option label="鲜花" value="鲜花" />
                </el-select>
            </el-form-item>
            <el-form-item label="评分最小值">
                <el-input placeholder="请输入评分最小区间" clearable v-model="searchParams.minScore" />
            </el-form-item>
            <el-form-item label="评分最大值">
                <el-input placeholder="请输入评分最大区间" clearable v-model="searchParams.maxScore" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData">搜索</el-button>
            </el-form-item>
        </el-form>

        <el-button type="primary" @click="handleDialog('新增')">新增</el-button>
        <el-table :data="list" style="width: 100%" height="600">
            <el-table-column prop="id" label="id"></el-table-column>
            <el-table-column prop="shopName" label="名称"></el-table-column>
            <el-table-column prop="shopTel" label="电话"></el-table-column>
            <el-table-column prop="shopScore" label="评分"></el-table-column>
            <el-table-column prop="shopType" label="类型"></el-table-column>
            <el-table-column prop="shopImage" label="图片">
                <template #default="{ row }">
                    <img :src="row.shopImage" alt="" width="80">
                </template>
            </el-table-column>
            <el-table-column prop="shopAddress" label="地址"></el-table-column>
            <el-table-column prop="shopDescription" label="描述"></el-table-column>
            <el-table-column label="操作" width="170">
                <template #default="{ row }">
                    <el-button type="primary" round @click="handleDialog('编辑', row)">编辑</el-button>
                    <el-button type="danger" round @click="handleDelete(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="pageCode" />

        <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
            <el-form :rules="rules">
                <el-form-item label="店铺名称" prop="shopName">
                    <el-input v-model="currentData.shopName" />
                </el-form-item>
                <el-form-item label="店铺电话" prop="shopTel">
                    <el-input v-model="currentData.shopTel" />
                </el-form-item>
                <el-form-item label="店铺评分" prop="shopScore">
                    <el-input v-model="currentData.shopScore" />
                </el-form-item>
                <el-form-item label="店铺地址" prop="shopAddress">
                    <el-input v-model="currentData.shopAddress" />
                </el-form-item>
                <el-form-item label="商品类型" prop="shopType">
                    <el-input v-model="currentData.shopType" />
                </el-form-item>
                <el-form-item label="商品描述" prop="shopDescription">
                    <el-input v-model="currentData.shopDescription" />
                </el-form-item>
                <el-form-item label="商品图片" prop="shopImage">
                    <el-input v-model="currentData.shopImage" />
                </el-form-item>
                <el-form-item label="商品销量" prop="shopSellCount">
                    <el-input v-model="currentData.shopSellCount" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleOk">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>

<script setup>
import axios from 'axios';
import { reactive, ref, watch } from 'vue';

import { ElMessage, ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)

const currentData = ref({})

const searchParams = reactive({
    searchValue: '',
    type: '',
    minScore: '',
    maxScore: ''
})

const rules = {
    shopName: [
        { required: true, message: '请输入店铺名称'}
    ],
    shopTel: [
        { required: true, message: '请输入店铺电话'}
    ],
    shopScore: [
        { required: true, message: '请输入店铺评分'}
    ],
    shopAddress: [
        { required: true, message: '请输入店铺地址'}
    ],
    shopType: [
        { required: true, message: '请输入商品类型'}
    ],
    shopDescription: [
        { required: true, message: '请输入商品描述'}
    ],
    shopImage: [
        { required: true, message: '请输入商品图片'}
    ],
    shopSellCount: [
        { required: true, message: '请输入商品销量'}
    ],

}

// 弹框的确认按钮
const handleOk = () => {
    // 如果currentData数据中有id，就表示是编辑，没有就是新增
    if (currentData.value.id) {
        axios.post('/api/list', currentData.value).then(res => {
            if (res.data.code === 10000 && res.status === 200) {
                getData()
                dialogVisible.value = false
            }
        })
    } else {
        // axios.put('/api/list', currentData.value).then(res => {
        //     if (res.data.code === 10000 && res.status === 200) {
        //         getData()
        //         dialogVisible.value = false
        //     }
        // })
    }
}
// 删除
const handleDelete = async id => {
    // axios.delete('/api/list', {params : { id }}).then(res =>{
    //     console.log(res);
    //     getData()
    // })

    await axios.delete('/api/list', { params: { id } })
    getData()
    ElMessage.success('数据删除成功')
}
// 弹框展开时判断是新增还是编辑
const handleDialog = (title, row) => {
    if (title === '新增') {
        // 展开弹框
        dialogVisible.value = true
    } else {
        dialogVisible.value = true
        // 数据回填
        currentData.value = { ...row }
    }
}
// 弹框按钮的左上角关闭按钮
const handleClose = (done) => {
    ElMessageBox.confirm('你确定关闭弹框吗？')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

const list = ref([])
const total = ref(0)
// 当前页码
const pageCode = ref(1)
// 获取页面数据
const getData = () => {
    axios.get('/api/list', { params: { pageCode: pageCode.value, ...searchParams } }).then(res => {
        console.log(res);
        list.value = res.data.data.data
        total.value = res.data.data.totalCount
    })
}

getData()
// 监听分页器，数据发生变化时就重新请求数据
watch(pageCode, () => {
    getData()
})
</script>